<template>
  <div class="stepLine2bg">
    <div class="flex-cc">
      <div class="flex-c">
        <div class="flex-c li" v-for="(item, index) in stepsList" :key="index">
          <div
            v-if="index != 0"
            :class="
              index + 1 <= currentStep ? judge('bgRedLR') : judge('bgE345')
            "
          ></div>
          <img
            v-if="index + 1 < currentStep"
            :src="item.imgend"
            alt=""
            class="img1"
          />
          <div v-else-if="index + 1 == currentStep" class="yuan1 flex-cc">
            {{ index + 1 }}
          </div>
          <div v-else class="yuan2 flex-cc">{{ index + 1 }}</div>
          <div
            class="text"
            :class="index + 1 == currentStep ? 'font-size-16px !color-#2E2E2E font-bold' : ''"
          >
            {{ item.decs }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="tsx">
import { ref } from "vue";

const props = defineProps({
  stepsList: {
    type: Array,
    default: () => [],
  },
  stepsDesc: {
    type: Array,
    default: () => [],
  },
  currentStep: {
    type: Number,
    default: 1,
  },
  lineWidth: {
    type: String,
    default: () => "w-220px",
  },
});

const judge = (data) => {
  return data + " " + props.lineWidth;
};
</script>
<style lang="less" scoped>
.stepLine2bg {
  .Line1 {
    width: 154px;
    height: 4px;
    border-radius: 8px 8px 8px 8px;
  }
  .bgRedLR {
    border: 1px solid #999999;
  }
  .bgE345 {
    border: 1px dashed #999999;
  }
  .yuan1 {
    width: 40px;
    height: 40px;
    border-radius: 50px;
    margin: 0 10px;
    background: #4285f4;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
  }
  .yuan2 {
    width: 40px;
    height: 40px;
    border-radius: 50px;
    border: 1px solid #999;
    margin: 0 10px;
    color: #999;
    font-size: 18px;
  }
  .img1 {
    width: 40px;
    height: 40px;
    margin: 0 10px;
  }
  .li {
    position: relative;
    .text {
      color: #999;
      position: absolute;
      bottom: -25px;
      right: -22px;
      width: 100px;
      text-align: center;
    }
  }
}
</style>
